<template>
  <el-dialog
      title="添加项目"
      :visible.sync="projectIsShow"
      width="40%"

  >
    <el-transfer v-model="projects"
                 :titles="['可选项目', '已选项目']"
                 :data="projectOptions" style="margin-left: 70px"
    ></el-transfer>
    <span slot="footer" class="dialog-footer">
          <el-button @click="projectIsShow = false">取 消</el-button>
          <el-button type="primary" @click="addProject">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getBudgetProjects, listProject } from '@/api/project'
import { saveProjects } from '@/api/budget'

export default {
  name: 'BudgetProject',
  props: ['budgetId', 'customerId', 'engineerProjectId'],
  data() {
    return {
      projectOptions: [],
      projects: [],
      projectIsShow: false
    }
  },
  methods: {
    addProject() {
      saveProjects({
        projects: this.projects,
        customerId: this.customerId,
        engineerProjectId: this.engineerProjectId
      }).then(() => {

        this.projectIsShow = false

        this.$emit('loadBudget')
      })

    },
    loadProjects() {
      listProject().then(data => {
        data.forEach(n => {
          this.projectOptions.push({
            key: n.id,
            label: n.name
          })
        })
      })

    },
    cancel() {
      this.projectIsShow = false
    }
  },
  mounted() {
    this.loadProjects()
    this.$bus.$on('handleProjectAdd', () => {


      if (Number.isInteger(this.customerId) &&Number.isInteger(this.engineerProjectId) ) {
        this.projectIsShow = true
        if (this.budgetId) {
          getBudgetProjects(this.budgetId).then(n => {

            this.projects = n.map(n => n.projectId)
          })
        }else {
          this.projects=[]
        }
      }

    })
  }
}
</script>

<style scoped>

</style>
